/* 获取元素 */
const imgs = document.getElementById("imgs");
const leftBtn = document.getElementById("left");
const rightBtn = document.getElementById("right");

const img = document.querySelectorAll("#imgs img");
/* 初始值 */
let idx = 0;
/* 设置定时器  每过两秒钟调用一次run函数*/
const run = () => {
  /* 自增 */
  idx++;
  /* 改变图片 */
  changeImage();
};
let interval = setInterval(run, 2000);

const changeImage = () => {
  /* idx是不是自增到大于最后一张图片了 */
  if (idx > img.length - 1) {
    /* 大于了就重新置为0 */
    idx = 0;
  } else if (idx < 0) {
    /* 小于0就从最后一张开始*/
    idx = img.length - 1;
  }
  /* 将当前元素在x轴上平移 */
  imgs.style.transform = `translateX(${-idx * 500}px)`;
};

const resetInterval = () => {
  /* 清除定时器 */
  clearInterval(interval);
  /* 开启定时器 */
  interval = setInterval(run, 2000);
};
/* 按钮下一张点击事件 */
rightBtn.addEventListener("click", () => {
  /* 自增 */
  idx++;
  /* 改变图片 */
  changeImage();
  /* 清除定时器重新开启 */
  resetInterval();
});
/* 上一张按钮点击事件 */
leftBtn.addEventListener("click", () => {
  /* 自增 */
  idx--;
  /* 改变图片 */
  changeImage();
  /* 清除定时器重新开启 */
  resetInterval();
});
